<template>
  <div class="business-goodsList">
	  <!-- 公共组件-每个页面必须引入 -->
	  <public-module></public-module>
	  <u-sticky bgColor="#fff">
		  <div style="padding:24rpx">
			  <u-search placeholder="请输入商品品名" v-model="keyword" :showAction="false"  @search="searchList"></u-search>
		  </div>
	    </u-sticky>
	  <div class="cell-con-div" >
		  <div class="goods-item" v-for="(item,index) in goodsList" :key='index'>
			  <view class="goodsList-content" >
			    <view class="goods-img">
					<img :src="item.goodsPic" style="width:100%;height:100%;object-fit: contain;"/>
			    </view>
			    <view class="goods-con">
			      <div class="goods-name">{{item.parentCategoryName}}/{{item.categoryName}} / {{item.brandName}} / {{item.goodsSn}}</div>
				  <div class="goods-attr" style="margin-top:8rpx;">
					  商品价格：
					  <span style="font-size:32rpx;font-weight: bold;color:#FF5E01">{{item.goodsPrice}}</span>
					  <span style="padding-left:10rpx" v-if="item.goodsPrice != '电议'">元/吨</span>
				  </div>
				  <div class="goods-attr" >所在地：{{item.sendArea}}</div>
				  <div class="goods-attr">
					  发货日期： {{item.sendWaitDays == 0 ? '现货' : item.sendWaitDays+'天'}}
				  <span style="padding-left:20rpx">库存：{{item.goodsStock}}吨</span>
				  </div>
			    </view>
			  </view>
			  <div class="goods-item-btn">
				   <u-button type="warning" :plain="true"  shape="circle" @click="changejia(item)" :text="item.isShow == 1 ? '下架' : '上架'" size="small" :customStyle="{width:'100rpx','margin-right':'20rpx'}"></u-button>	
			       <u-button type="success" @click="showPrice(item)" shape="circle" text="更新价格库存" :plain="true" size="small" :customStyle="{width:'180rpx','margin-right':'20rpx'}"></u-button>
				   <u-button shape="circle" @click="toAddGoods('edit',item.id)" text="编辑"  color="#3c9cff" size="small" :plain="true" :customStyle="{width:'100rpx','margin-right':'20rpx'}"></u-button>
			       <u-button shape="circle" @click="delGood(item.id)" text="删除" size="small" :customStyle="{width:'100rpx'}"></u-button>	
			  </div>
		  </div>
	  </div>
	  
	  <div style="padding-bottom:40rpx;">
	     <u-loadmore :status="status" ></u-loadmore>
	  </div>
	  <view class="page-bottom-btn">
	     <u-button text="新增商品" type="primary" shape="circle" @click="toAddGoods('add')"></u-button>
	  </view>
	  
	  <!--时间选择-->
	  <u-datetime-picker ref="picker" :show="showTime" v-model="value1" mode="date" @confirm="confirmTime" @cancel="showTime=false;showUpdate=true"></u-datetime-picker>
	  <!--更新价格库存-->
	  <u-popup :show="showUpdate" mode="bottom" :round="10" @close="closeShow">
	      <div class="popupTitle">更新价格库存</div>
	  	<div class="popup-con">
	  		<u--form labelPosition="left" :model="form" :rules="rules" ref="form" labelWidth="100" errorType="toast">
	  			<u-form-item label="商品" borderBottom>
	  				<div style="text-align: right;">{{ goodsInfo.name}}</div>
	  			</u-form-item>
	  			<u-form-item label="所在地" borderBottom>
					<div style="text-align: right;">{{goodsInfo.sendArea}}</div>
	  			</u-form-item>
				<u-form-item  label="价格电议"  borderBottom >
					<div style="display: flex;justify-content: flex-end;">
						<u-switch v-model="form.goodsPrice" activeValue="电议" :inactiveValue="null"></u-switch>
					</div>
				</u-form-item>
				<u-form-item  label="价格" prop="goodsPrice" borderBottom required>
					<u--input  fontSize="14"  inputAlign="right" v-model="form.goodsPrice" border="none"  placeholder="请输入价格" :disabled="form.goodsPrice=='电议'"></u--input>
				</u-form-item>
				<u-form-item  label="库存数量(吨)" prop="goodsStock" borderBottom required>
					<u--input  fontSize="14"  inputAlign="right" v-model="form.goodsStock" border="none"  placeholder="请输入库存数量"></u--input>
				</u-form-item>
				<u-form-item label="发货时间(天)"  borderBottom  prop="sendWaitDays" required>
					<u--input  fontSize="14"  inputAlign="right" v-model="form.sendWaitDays" border="none"  placeholder="请输入发货时间"></u--input>
				</u-form-item>
	  		</u--form>
	  	</div>
	  	<div class="u-flex popup-bottom">
	  		<u-button text="取消"  shape="circle" @click="closeShow"></u-button>
	  		<u-button text="确认"  shape="circle" type="primary" @click="saveForm" :loading="btnLoading"></u-button>
	  	</div>
	  </u-popup>
	  	  
    
    
  </div>
</template>

<script>
  import { myGoodsList, delGoods,setGoods } from '@/config/api2.js'
  import {getGoodsCate,editGoodsBathPriceAPI,goodsSet} from '@/config/api.js'
	const defaultForm = {
	  goodsId:"",
	  goodsPrice: "",
	  goodsStock:"",
	  sendWaitDays:""
	};
  export default {
    data() {
      return {
        goodsList: [],
		status: 'loadmore',
		pageNum: 0,
		pageSize:10,
		keyword:'',
		count:0,
		showUpdate:false,
		form: JSON.parse(JSON.stringify(defaultForm)),
		rules:{
			sendWaitDays: [{
				required: true,
				type:'integer',
				message: '发货时间请输入整数',
				// 可以单个或者同时写两个触发验证方式
				trigger: ['blur', 'change']
			}],
			goodsPrice: [{
					required: true,
					type:'string',
					message: '请输入价格',
					trigger: ['blur', 'change'],
				}],
			goodsStock: [{
					required: true,
					message: '请输入库存数量',
					// 可以单个或者同时写两个触发验证方式
					trigger: ['blur', 'change']
				}],
					
		},
		goodsInfo:{},
		showTime:false,
		value1:Number(new Date()),
		btnLoading:false
	  }
    },
    
	onShow(){
		 this.clearData()
		 this.getMyGoodsList()
	},
	components: {
	  
	},
	onReachBottom() {
		if(this.goodsList.length >= this.count) {
			this.status = 'nomore';
			return ;
		}
		this.pageNum = ++ this.pageNum;
		this.getMyGoodsList()
	},
    methods: {
		 changejia(item){
		      goodsSet({goodsId:item.id,isShow:item.isShow ? 0 : 1}).then(()=>{
		        this.searchList()
		      })
		    },
		closeShow(){
			this.showUpdate = false
		},
		//显示更新价格库存
		showPrice(item){
			this.goodsInfo.name = item.parentCategoryName +'/'+item.categoryName +'/'+item.brandName +'/'+item.goodsSn 
			this.goodsInfo.sendArea = item.sendArea;
			this.form.goodsId = item.id;
			this.form.goodsPrice = item.goodsPrice+'';
			this.form.goodsStock = item.goodsStock;
			this.form.sendWaitDays = item.sendWaitDays;
			this.showUpdate = true
			
		},
		//提交更新价格库存
		saveForm(){
			console.log(this.form)
			this.$refs.form.validate().then(res => {
			   this.btnLoading = true;
			   let  form = JSON.parse(JSON.stringify(this.form));
			   let data = []
			   data.push(form)
				 editGoodsBathPriceAPI({data:data}).then((res)=>{
					   this.btnLoading = false;
					   uni.showToast({
					     title: '提交成功！',
					     icon: 'none',
					     duration: 2000,
					   });
					   this.searchList()   
					   this.showUpdate = false
				 }).catch(()=>{
					   this.btnLoading = false;
				 })
			}).catch(errors => {
				
			})
			
		},
		//显示时间选择
		showDate(){
			this.showTime = true;
			this.showUpdate = false
			let date = this.form['sendDate'] ? new Date(this.form['sendDate']) :new Date()
			console.log(date)
			this.value1 = Number(date);	
			this.$refs.picker.innerValue=this.value1
		},
		confirmTime(e){
			this.form['sendDate'] = this.result(e.value, e.mode);
			this.showTime = false;
			this.showUpdate = true
		},
		result(time, mode) {
			const timeFormat = uni.$u.timeFormat;	
			switch (mode) {
				case 'datetime':
					return timeFormat(time, 'yyyy-mm-dd hh:MM')
				case 'date':
					return timeFormat(time, 'yyyy-mm-dd')
				
			}
		},
		//清除数据
		clearData(){
				this.pageNum = 1;
				this.goodsList = [];
				this.status = 'loadmore';
				this.count = 0;
		},
		searchList(){
			this.clearData();
			this.getMyGoodsList()
		},
	
	
		toAddGoods(type,id){
			if(type == 'add'){
				uni.navigateTo({
				  url: '/pagesUser/business/addGoods?type='+type
				})
			}else{
				uni.navigateTo({
				  url: '/pagesUser/business/addGoods?type='+type+'&goodsId='+id
				})
			}
			
		},
		
      getMyGoodsList() {
		  let data = {};
	      data.keyword = this.keyword;
		  data.pageNum = this.pageNum;
		  data.pageSize = this.pageSize;
		  myGoodsList(data).then(res => {
			this.goodsList = this.goodsList.concat(res.list ? res.list : [] );
			this.count = res.count;
			if(this.goodsList.length >= this.count) {
				this.status = 'nomore';
			}else{
				this.status = 'loadmore';
			}
		  })
      },
	  
      delGood(id) {
        uni.showModal({
          title: '删除提示',
          content: '是否确认删除？',
          success: (res) => {
            if (res.confirm) {
              delGoods({
                goodsId: id
              }).then(
                res => {
				  this.searchList()
                }
              )
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        });

      },
    
    }
  }
</script>

<style lang="scss">
 @import '@/style/common.scss';
 .business-goodsList{
	 padding-bottom:200rpx;
	 .goodsList-ps{
		 font-size:24rpx;
		 color:#888;
		 margin-bottom:20rpx;
	 }
 }
 .cell-con-div{
	 padding:32rpx;
	 .class-item{
			 margin-bottom:40rpx;
			 background: #fff;
			 border-radius: 18rpx;
			 padding:32rpx;
		     box-shadow: 0px 0px 10px rgba(0, 17, 52, 0.01);
			 .class-title{
				 font-size:32rpx;
				 font-weight:bold;
				 color: #000;
			 }
			 .class-list{
				 .list-item{
					 display: inline-block;
					 width:30%;
					 border:1px solid #eee;
					 color: #1E1E1E;
					 font-size:24rpx;
					 text-align: center;
					 height:56rpx;
					 line-height: 54rpx;
					 border-radius: 27rpx;
					 margin-right:5%;
					 margin-top:20rpx;
				 }
				.list-item:nth-child(3n){
				  margin-right: 0;
				}
				.choose.list-item{
					background: #FF5E01;
					color:#fff
				}
			 }
		 
	 }
	 .goods-item{
		 background: #fff;
		 border-radius: 18rpx;
		 padding:32rpx;
		 box-shadow: 0px 0px 10px rgba(0, 17, 52, 0.01);
		 margin-bottom:40rpx;
		 .goodsList-content{
		 		 @include flexbox(flex-start,center);
				 padding-bottom:32rpx;
		 		 .goods-img{
		 			 width:140rpx;
					 height:140rpx;
		 		 }
		 		 .goods-con{
		 			margin-left:16rpx;
					width:calc(100% - 140rpx);
					.goods-name{
						font-size:28rpx;
					}
					.goods-attr{
						font-size: 24rpx;
						color:#888
					}
		 		 }
		 }
		 .goods-item-btn{
			  border-top:1px solid #eee;
			  padding-top:32rpx;
			  @include flexbox(flex-end,center);
		 }
	 }
	 
 }
	.page-bottom-btn{
		padding:0 32rpx
	}


	.popupTitle{
		font-size:$b-font;
		font-weight: bold;
		text-align: center;
		line-height: 50px;
	}
   .popup-con{
    	padding:0 16px 16px 16px;
    
    	
    }
    .popup-bottom{
    	background: #fff;
    	margin-top:10px;
    	padding:16px;
    }
    .popup-bottom-fixed{
    	position: fixed;
    	width:100%;
    	padding:16px;
    	box-sizing: border-box;
    	bottom:0
    }
    
    


</style>